<template>
  <div class="grid-item" :style="mergeStyle">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'GridItem',
  props:{
    area:{
      type:String,
      default:undefined,//<row-start> / <column-start> / <row-end> / <column-end>;
    },
    placeSelf:{
      type:String,
      default:undefined,//<align-self> <justify-self>;
    },
  },
  data(){
    return {
      mergeStyle:{
        gridArea:this.area,
        placeSelf:this.placeSelf,
      }
    }
  }
}
</script>
<style scoped>
.grid-item{
  
}
</style>